<template>
<div class="vacation-dialog">
  <el-dialog
  :visible="dialogVisible"
  :show-close="ShowClose"
   width="30%"
   center
   top='3vh'
   @open='sendAjax'>
  <div class="vacation">
  
    <section class="view">
  
 
      <h1 class="my-vacation">
  
        我的假期
  
      </h1>
  
  
      <div class="view-content">
  
        <div>
  
          <h1 class="type">
  
            <span>{{res.leaveName}} 
              <el-tooltip
                 v-if='yearDetail.comment'
                 :content="yearDetail.comment"
                 popper-class='tooltip'
              >
                <i>?</i>
              </el-tooltip>
            </span>

          </h1>
  
  
          <!-- 年假 -->
          <div v-if='res.endDate'>
  
  
  
            <h2 class="title">
  
  
  
              <span>{{res.JN}}{{res.leaveName}}</span>
  
  
  
              <span v-if='res.endDate' class="title-subhead" :class='{"subhead-warning":active==1}'>有效期{{res.endDate}}</span>
  
  
  
            </h2>
  
  
  
            <p class="remain type1">
  
  
  
              <span>共{{res.sunDays}}天</span>
  
  
  
              <span>剩余{{res.surplus}}天</span>
  
  
  
              <span style='margin-left:8px'>已休{{res.qjDays}}天</span>
  
  
  
            </p>
  
  
  
            <div class="range">
  
              <span v-if='parseFloat(res.surplus) > 0' :style='"width:"+(100-(parseFloat(res.surplus)/parseFloat(res.sunDays))*100)+"%"'></span>
              <span v-else style='width:100%'></span>
            </div>
  
  
  
          </div>

          <!-- 去年年假 -->

          <div v-if='res.endDateAgo'>
  
  
  
            <h2 class="title">
  
  
  
              <span>{{res.QN}}{{res.leaveName}}</span>
  
  
  
              <span v-if='res.endDateAgo' class="title-subhead" :class='{"subhead-warning":active==1}'>有效期{{res.endDateAgo}}</span>
  
  
  
            </h2>
  
  
  
            <p class="remain type1">
  
  
  
              <span>共{{res.sunDaysAgo}}天</span>
  
  
  
              <span>剩余{{res.surplusAgo}}天</span>
  
  
  
              <span style='margin-left:8px'>已休{{res.reduceDaysAgo}}天</span>
  
  
  
            </p>
  
  
  
            <div class="range">
  
              <span v-if='parseFloat(res.surplusAgo) > 0' :style='"width:"+(100-(parseFloat(res.surplusAgo)/parseFloat(res.sunDaysAgo))*100)+"%"'></span>
           
              <span v-else style='width:100%'></span>

           
            </div>
  
  
          </div>
  
  




          <h1 class="type" v-if='res.leaveQX'>
  
            <span>病假 
              <el-tooltip
                v-if='sickDetail.comment'
                :content="sickDetail.comment"
                popper-class='tooltip'
              >
                <i>?</i>
              </el-tooltip>
            </span>
  
          </h1>
  
  
          <div>
  
          <!-- 全薪病假 v-if='res.qxDays'-->
             <div v-if='res.leaveQX || res.qxendDate'>
  
              <h2 class="title">
  
  
               <span style='font-weight:normal'>{{res.leaveQX}}</span>
  
   
                <span v-if='res.qxendDate' class="title-subhead" :class='{"subhead-warning":active==1}'>有效期{{res.qxendDate}}</span>
  
  
              </h2>
  
  
              <p class="remain type1">
  
  
                <span>共{{res.qxDays || 0.0}}天</span>
  
  
                <span>剩余{{res.surplusQX || 0.0}}天</span>
  
  
                <span style='margin-left:8px'>已休{{res.qjQXDays || 0.0}}天</span>
  
  
              </p>
  
              <div class="range">
  
               <span v-if='parseFloat(res.surplusQX) > 0' :style='"width:"+(100-(parseFloat(res.surplusQX)/parseFloat(res.qxDays))*100)+"%"'></span>

               <span v-else style='width:100%'></span>

  
              </div>

              
  
            </div>


          <!-- 有薪病假 v-if='res.leaveYX'-->
             <div style='padding-top:12px' v-if='res.leaveYX' >

              <h2 class="title youxin-title" style='font-weight:normal'>
  
                <span>{{res.leaveYX}}</span>


                <span>剩余{{res.surplusYX}}天</span>  

              </h2>


            </div> 
  
          </div> 
  
        </div>
  
      </div>
  
  
    </section>
  
  
  
  </div>


  <span slot="footer">
    <el-button type="primary" @click="close">关 闭</el-button>
  </span>
</el-dialog>
</div>

  
</template>

<script>
import Vue from 'vue'

import {

  Dialog,
  Tooltip

} from 'element-ui'

Vue.use(Dialog)
Vue.use(Tooltip)

export default {

  data () {

    return {

      active: 1,

      res: '',

      ShowClose: false,

      sickDetail: {
        comment:''
      },

      yearDetail: {
        comment:''
      }
    }

  },

  mounted () {
    Bus.$on('vacationData', data => {
      this.dialogVisible = data.dialogVisible
    })
  },

  props: ['dialogVisible'],

  methods: {
    getVacationDetail () {
      this.Axios
        .Post(this.URL.getLeaveInstruction.url)
        .then((res) => {
          let datas = res.data.datas
          this.yearDetail.comment = datas && datas[0]  && datas[0].comment
          this.sickDetail.comment = datas && datas[1] && datas[1].comment 
        })
    },

    sendAjax () {

      this.getVacationDetail()

      this.Axios.Post(this.URL.getValication.url)

        .then((res) => {

          let data = res.data.datas

          this.res = data

        })

    },

    close: function () {
      this.$emit('update:dialogVisible', !this.dialogVisible)
    }

  },

  watch: {
    dialogVisible: function (newVal, oldVal) {
      this.$emit('update:dialogVisible', newVal)
    }
  }

}
</script>

<style lang='less'>
.tooltip {
  max-width: 400px;
  line-height: 25px !important;
  letter-spacing: 1px;
  font-size: 15px !important;
  background-color: #f0f9eb !important;
  color: #67c23a !important;
  padding: 15px !important;
  .popper__arrow {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
  .popper__arrow::after {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
}
.vacation-dialog {
  .el-dialog__header {
    padding: 0 !important;
  }
  .el-dialog__body {
    padding: 0 !important;
  }

  .el-dialog__headerbtn {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 878;
  }
  .vacation {
    width: 100%;

    .view {
      background-color: #fff;

      position: relative;

      .my-vacation {
        text-align: center;

        padding: 12px 0;

        border-bottom: 1px solid #f2f2f2;

        font-size: 18px;

        font-weight: normal;

        letter-spacing: 1px;
      }

      .type {
        text-align: center;

        margin-top: 50px;

        color: #666;

        font-weight: normal;

        font-size: 18px;

        position: relative;

        i {
          display: inline-block;
          background-color: #89abc6;

          font-size: 14px;

          border-radius: 50%;

          height: 16px;

          line-height: 16px;

          width: 16px;

          margin-left: 10px;

          color: #fff;

          cursor: pointer;

          font-style: normal;
        }
      }

      .view-content {
        margin-top: 10px;

        width: 60%;

        margin: 0 auto;

        .youxin-title {
          display: flex;
          justify-content: space-between;
          span:last-of-type {
            color: #26a2ff;
          }
        }

        .title {
          margin-top: 25px;

          padding: 8px 0;

          span:first-of-type {
            font-size: 15px;
          }

          .title-subhead {
            color: #669966;

            margin-left: 6px;

            font-size: 12px;
          }

          .subhead-warning {
            color: #cc0000 !important;
          }
        }

        .remain {
          padding-top: 15px;

          font-size: 12px;

          overflow: hidden;

          span:nth-of-type(2) {
            float: right;

            text-align: right;

            color: #26a2ff;
          }
        }
      }

      .range {
        height: 8px;

        width: 100%;

        margin-top: 6px;

        border-radius: 5px;

        position: relative;

        background-color: #26a2ff;

        span {
          background-color: #ccccff;

          height: 8px;

          width: 70%;

          border-radius: 5px;

          position: absolute;

          left: 0;

          top: 0;

          &::before {
            content: '';

            position: absolute;

            right: -8px;

            top: 50%;

            background-color: #fff;

            width: 10px;

            height: 10px;

            margin-top: -6px;

            border: 1px solid #26a2ff;

            border-radius: 50%;
          }
        }
      }
    }

    .detail {
      margin-top: 10px;

      padding-bottom: 100px;

      li {
        margin-top: 10px;

        background-color: #fff;
      }

      .detail-title {
        padding: 8px;

        font-weight: normal;

        overflow: hidden;

        p {
          display: inline-block;

          float: right;

          color: grey;

          font-size: 12px;

          margin-top: 2px;
        }

        span:first-of-type {
          position: relative;

          margin-left: 16px;

          &::before {
            content: '';

            width: 6px;

            height: 6px;

            border-radius: 50%;

            background-color: #26a2ff;

            position: absolute;

            left: -14px;

            top: 50%;

            margin-top: -3px;
          }
        }

        span:last-of-type {
          margin-left: 15px;
        }
      }

      .detail-content {
        border-top: #f4f4f4 solid 1px;

        padding: 14px 0 14px 12px;
      }
    }

    .apply {
      position: fixed;

      bottom: 0;

      left: 0;

      background: #fff;

      width: 100%;

      padding: 12px 0;

      span {
        display: block;

        width: 200px;

        font-size: 16px;

        margin: 0 auto;

        padding: 10px 0;

        border-radius: 28px;

        text-align: center;

        background-color: #26a2ff;

        color: #fff;

        cursor: pointer;
      }
    }
  }
}
</style>